<template>
  <div class="container">
    <div class="header">
      <NavBar
        title="新增包裹"
        left-arrow
        color="#333333"
        @click-left="back"
        @click-right="backHome"
      >
        <template #right>
          <Icon name="wap-home-o" size="20" />
        </template>
      </NavBar>
    </div>
    <div class="main">
      <img class="logo" :src="expressPic" alt="" />
      <div
        class="express-name flex align-items space-between"
        @click="showPicker = true"
      >
        <div class="left">快递公司:</div>
        <div class="right flex1 flex align-items space-between">
          <span class="spa">{{ coucomList[current] }}</span>
          <i class="iconfont iconarrow-right"></i>
        </div>
      </div>
      <Field
        size="large"
        type="text"
        v-model="nums"
        label="快递单号："
        placeholder="请输入快递单号"
      />
      <div class="c-box">
          <Boxtype v-model='typeId'></Boxtype>
      </div>
      <Field
        size="large"
        type="text"
        v-model="name"
        label="货物名称："
        placeholder="请输入货物名称"
      />
      <Field
        size="large"
        type="digit"
        v-model="price"
        label="单价："
        placeholder="请输入单价"
      />
      <div class="b-container">
          <div class="b-box">
            <div class="left">是否开箱检查?（{{boxPrice}}元）</div>
            <RadioGroup v-model="radio" direction="horizontal">
                <Radio name="1" checked-color="#5652FF"><span class="radio-txt">需要</span> </Radio>
                <Radio name="0" checked-color="#5652FF"><span class="radio-txt">不需要</span></Radio>
              </RadioGroup>
          </div>
          <div class="b-box">
            <div class="left">是否申请打木架 <span class="link" @click='showMujia'>(具体根据体积计算 > )</span> </div>
            <RadioGroup v-model="mujia" direction="horizontal">
              <Radio name="1" checked-color="#5652FF"><span class="radio-txt">需要</span> </Radio>
              <Radio name="0" checked-color="#5652FF"><span class="radio-txt">不需要</span></Radio>
            </RadioGroup>
          </div>
      </div>
      <div class="btns">
        <Button type="info" block @click="submit">提交</Button>
      </div>
    </div>
    <Popup v-model="showPicker" round position="bottom">
      <Picker
        show-toolbar
        :columns="coucomList"
        :default-index="current"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </Popup>
  </div>
</template>

<script>
import { NavBar, Icon, Field, Button, Picker, Popup, Dialog , RadioGroup, Radio , ImagePreview } from "vant";
import { getCouComList, baoguoAdd, baoguoInfo , baoguoEdit , getBoxPrice , getMujiaInfo } from "@/model/api";
import expressPic from "@/assets/express.png";
import Boxtype from '@/components/Boxtype/Boxtype'
export default {
  components: {
    NavBar,
    Icon,
    Field,
    Button,
    Picker,
    Popup,
    Boxtype,
    RadioGroup, Radio
  },
  data() {
    return {
      expressPic,
      showPicker: false,
      coucomList: [], //快递公司集合
      current: 0,
      nums: "",
      name: "",
      price: "",
      id:"", 
      typeId:"",//物品类型id
      radio:"0",
      mujia:"0",
      boxPrice:"",
      mujiaPic:"",
    };
  },
  methods: {
    submit() {
      if (!this.nums) {
        this.$toast({
          type: "fail",
          message: "请输入快递单号",
        });
        return false;
      }
      if (!this.name) {
        this.$toast({
          type: "fail",
          message: "请输入货物名称",
        });
        return false;
      }
      if (!this.price) {
        this.$toast({
          type: "fail",
          message: "请输入单价",
        });
        return false;
      }
      this.mode == 1 ? this.addNew() : this.editThis();
    },
    async addNew(){
      let { code, msg } = await baoguoAdd({
        address_id: 1,
        express_name: this.coucomList[this.current],
        express_sn: this.nums,
        name: this.name,
        price: this.price,
        category_id:this.typeId,
        is_see:this.radio,
        is_wood:this.mujia,
      });
      if (code == 1) {
        Dialog.alert({
          title: "提示",
          message: msg,
        })
          .then(() => {
            this.$router.go(-1);
          })
          .catch();
      } else {
        this.$toast({
          type: "fail",
          message: msg,
        });
      }
    },
    async editThis(){
       let { code, msg } = await baoguoEdit({
        id:this.id,
        address_id: 1,
        express_name: this.coucomList[this.current],
        express_sn: this.nums,
        name: this.name,
        price: this.price,
        category_id:this.typeId,
        is_see:this.radio,
        is_wood:this.mujia,
      });
      if (code == 1) {
        Dialog.alert({
          title: "提示",
          message: msg,
        })
          .then(() => {
            this.$router.go(-1);
          })
          .catch();
      } else {
        this.$toast({
          type: "fail",
          message: msg,
        });
      }
    },
    onConfirm(result) {
      this.current = this.coucomList.findIndex((v) => v == result);
      this.showPicker = false;
    },
    //打木架说明
    async getMujiaPic(){
      let imgSrc = await getMujiaInfo();
      this.mujiaPic = imgSrc;
    },
    showMujia(){
      ImagePreview([this.mujiaPic]);
    },
    async getPrice(){
       let data = await getBoxPrice();
       this.boxPrice = data;
    }
  },
  async created() {
    let { mode = 1, id = "" } = this.$route.query;
    this.mode = mode;
    this.id = id;
    //获取快递公司
    let { code, data } = await getCouComList();
    code == 1 ? (this.coucomList = data) : "";
    //获取费用
    this.getPrice();
    this.getMujiaPic();
    //编辑模式下获取信息
    if (mode == 2) {
      let { code, data } = await baoguoInfo({ id });
      if (code == 1) {
        this.current = this.coucomList.findIndex(v => v == data.express_name);
        this.nums = data.express_sn;
        this.name = data.name;
        this.price = data.price;
        this.typeId = data.category_id;
        this.radio = (data.is_see).toString();
        this.mujia = (data.is_wood).toString();
      }
    }
  },
};
</script>

<style lang="less" scoped>
.main{
  padding-bottom: 60px;
}
.b-container{
  width:100%;
  height:auto;
  padding:0 14px;
  .b-box{
    width:100%;
    height: auto;
    padding:14px 0;
    background: #fff;
    border-bottom:1px solid #ebedf0;
    .left{
      font-size: 16px;
      margin-right: 10px;
      margin-bottom: 10px;
      color:#646566;
      span{
        color:#1989fa;
      }
    }
  }
}

.express-name {
  width: 100%;
  height: 55px;
  padding: 0 14px;
  background-color: #fff;
  margin-bottom: 5px;

  .left {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #222222;
    margin-right: 20px;
  }
  .right .spa {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .iconfont {
    font-size: 14px;
    color: #999999;
  }
}

/deep/ .van-field__control {
  font-size: 16px;
}

/deep/ .van-field__control::placeholder {
  font-size: 16px;
}

.btns {
  width: 100%;
  padding: 10px 14px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
}

.radio-txt{
  font-size:16px;
}
</style>
